<template>
  <div class="detail-comment-container">
      <MessageArea @submit="hanleSubmit" :list="data.rows" :isListLoading="isloading" :title="'评论列表'" :subTitle="data.total" ></MessageArea>
  </div>
</template>

<script>
import {setPageComment ,PostComment} from "../../api/blog"
import MessageArea from '../../components/MessageArea/index.vue';
import fetchData from '../../mixins/fetchData';

export default {
mixins:[fetchData({})],
components: { MessageArea },
data(){
  return {
    blogid:this.$route.params.id, 
    page  :1, 
    limit :10,
  }
},
created(){
  this.$Bus.$on('mainScroll',this.hanleMove)
},
destroyed(){
  this.$Bus.$emit('mainScroll')
  this.$Bus.$off('mainScroll',this.hanleMove)

},
computed:{
  hasMore(){
    return this.data.rows.length<this.data.total;
  }
},
    methods:{
      async fetchData(){
        return await setPageComment(this.blogid,this.page,this.limit )
      },
     async fetchMove(){//合并新的页码数据到原本数组
      if(!this.hasMore){
        return;
      }
      this.isloading=true;  
      this.page++;
      const resp= await this.fetchData();
       if(this.data.total<resp.total){
         return
       }
      this.data.total = resp.total;
      this.data.rows= this.data.rows.concat(resp.rows);
      this.isloading=false;
      },
     hanleMove(dom){//判断是否要进行获取心页码数组
       const range=100;
       if( this.isloading || !dom ){//没有创建dom是不要加载
         return;
       }
     const spacing=Math.abs(dom.scrollHeight-(dom.scrollTop+dom.clientHeight)) ;
     if(range>=spacing){//当视口位置到达我们指定的区域内进行加载新页码数据
      this.fetchMove();
  }
    //  console.log(1)
  },
     async hanleSubmit(fromData,callback){
       const resp=await PostComment( {blogid:this.blogid,
       ...fromData})
       this.data.rows.unshift(resp);
       callback('评论成功');
      }
    }

}
</script>

<style>

</style>